<template>
	<view>
		<view class="flex-col page">
			<view class="flex-col section_2">
				<text class="self-start text_3">{{ mood.name }}</text>
				<view class="flex-row justify-between self-stretch mt-17">
					<text class="font_3">志愿活动·{{mood.startTime}}</text>
					<view class="flex-row">
						<view class="flex-row">
							<u-icon name="thumb-up" size="20" @click="qiethumb" v-if="thumbShow==false"></u-icon>
							<u-icon name="thumb-up-fill" color="#2979ff" size="30" @click="qiethumb"
								v-if="thumbShow"></u-icon>
							<text class="font text_4 ml-5">点赞</text>
						</view>
						<view class="flex-row ml-16">
							<u-icon name="heart" size="20" @click="qieHeart" v-if="heartShow==false"></u-icon>
							<u-icon name="heart-fill" color="#2979ff" size="30" @click="qieHeart"
								v-if="heartShow"></u-icon>
							<text class="font_3 text_5 ml-5">收藏</text>
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 40rpx;">
				<u-parse class="richText" :html="richText"></u-parse>
			</view>
		</view>
		<u-modal v-model="show" @confirm='confirm' @cancel='show=false' title="报名信息">
			<view class="slot-content" style="padding: 15rpx;padding-left: 25rpx;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
					<u-form-item label="电话"><u-input v-model="form.intro" /></u-form-item>
				</u-form>
			</view>
		</u-modal>

		<view class="u-m-t-60 u-m-20" style="color: #fff;">
			<u-button :hair-line="false" :custom-style="customStyle" @click="show=true" v-if="mood.status==null">
				报名
			</u-button>
			<u-button :hair-line="false" :custom-style="customStyle" @click="toTijiao" v-if="mood.status==0">
				提交任务
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				type: '',
				richText: '',
				mood: {},
				items: [],
				commentContent: '',
				heartShow: false,
				comments: [],
				show: false,
				thumbShow: false,
				form: {
					name: '',
					phone: '',
					activitiesId: ''
				},
				customStyle: {
					color: 'black',
					backgroundColor: '#4578F7',
					color: '#fff'
				},
			}
		},
		onLoad(e) {
			this.form.activitiesId = e.id
			this.getDate()
		},
		methods: {
			toTijiao() {
				uni.navigateTo({
					url: '/pages/ziyuan/tijiao/tijiao?id=' + this.mood.enrollId
				})
			},
			async confirm() {
				let that = this
				let res = await this.$request('kehu/jiajiaCharityActivitiesEnroll/add', this.form)
				if (res.msg = '操作成功') {
					uni.showToast({
						title: '报名成功',
						icon: 'none'
					})
					setTimeout(() => {
						that.getDate()
					}, 1000)
				}
				this.show = false
			},
			qiethumb() {
				this.thumbShow = !this.thumbShow
				if (this.thumbShow) {
					uni.showToast({
						title: '点赞成功',
						icon: 'none',
					})
				}
			},
			qieHeart() {
				this.heartShow = !this.heartShow
				if (this.thumbShow) {
					uni.showToast({
						title: '收藏成功',
						icon: 'none',
					})
				}
			},
			async getDate() {
				let res = await this.$request('kehu/jiajiaCharityActivities/getInfo/' + this.form.activitiesId, {},
					'get')
				this.mood = res.data
				let richtext = res.data.content
				this.richText = richtext.replace(/\<h1/gi, '<h1 style="text-indent: 0em;"')
					.replace(/\<h2/gi, '<h2 style="text-indent: 0em;"')
					.replace(/\<img/gi, '<img style="text-indent: 0em;width:100%;height:auto;display:block;"');
			},
		}
	}
</script>

<style scoped>
	.mt-17 {
		margin-top: 34rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.page {
		padding: 2rpx 0 174rpx;
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section_2 {
		padding: 32.12rpx 28.38rpx 32rpx 29.36rpx;
		background-color: #ffffff;
	}

	.text_3 {
		margin-left: 4.74rpx;
		color: #333333;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 33.84rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.16rpx;
		color: #999999;
	}

	.image_7 {
		width: 26rpx;
		height: 26rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.16rpx;
		color: #333333;
	}

	.text_4 {
		line-height: 25.76rpx;
	}

	.image_8 {
		width: 28rpx;
		height: 28rpx;
	}

	.text_5 {
		line-height: 25.74rpx;
	}

	.section_3 {
		padding-left: 34rpx;
		padding-right: 16.72rpx;
		background-color: #ffffff;
		height: 1556rpx;
	}

	.group_4 {
		padding-bottom: 268.88rpx;
	}

	.font_4 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 70rpx;
		color: #333333;
	}

	.text_6 {
		text-align: justify;
	}

	.group_5 {
		border-radius: 16rpx;
		overflow: hidden;
		height: 280rpx;
	}

	.pos_3 {
		position: absolute;
		left: 0;
		right: 15.28rpx;
		top: 407.5rpx;
	}

	.image_9 {
		border-radius: 16rpx;
		overflow: hidden;
		width: 91.2vw;
		height: 37.3333vw;
	}

	.pos_4 {
		position: absolute;
		left: 0;
		right: 15.28rpx;
		bottom: 0;
	}

	.text_7 {
		text-align: justify;
	}

	.text_8 {
		margin-top: -12.86rpx;
		text-align: justify;
	}

	.section_4 {
		margin-top: 24rpx;
		padding-bottom: 164rpx;
		background-color: #ffffff;
	}

	.group_6 {
		padding: 32rpx 24rpx;
	}

	.section_5 {
		background-color: #2658e6;
		width: 4rpx;
		height: 28rpx;
	}

	.list-item {
		padding: 24rpx 20.36rpx 23.04rpx 24rpx;
	}

	.image_10 {
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
	}

	.text_10 {
		line-height: 26.3rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 17.8rpx;
		color: #999999;
	}

	.text_1 {
		margin-top: 8.52rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 48rpx;
		color: #666666;
	}

	.comment-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		z-index: 1000;
	}

	.comment-input {
		flex: 1;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.send-btn {
		width: 120rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #2869fe;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
</style>